<template>
  <div class="yunying">
    <div class="contentDiv">
      <div class="searchDiv">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="耗材管理" name="first"></el-tab-pane>
            <el-tab-pane label="设备管理" name="second"></el-tab-pane>
            <el-tab-pane label="报表管理" name="third"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="waringStyle">
          <el-date-picker
            v-model="valueDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-button class="ml10" type="primary" plain @click="jiexi">分析对比图</el-button>
        </div>
      </div>
      <div class="tableList">
        <el-table v-if="activeName === 'first'" :data="tableData1"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号"></el-table-column>
          <el-table-column property="station" label="材料名称" ></el-table-column>
          <el-table-column property="content" label="单位" ></el-table-column>
          <el-table-column property="person" label="单价（元）" ></el-table-column>
          <el-table-column property="waringji" label="材料商"></el-table-column>
          <el-table-column property="waringDate" label="日用量"></el-table-column>
          <el-table-column property="ywaringDate" label="月用量"></el-table-column>
          <el-table-column property="sdate" label="开始时间"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row,1)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="activeName === 'second'" :data="tableData2"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号"></el-table-column>
          <el-table-column property="mc" label="设备名称" ></el-table-column>
          <el-table-column property="danwei" label="单位" ></el-table-column>
          <el-table-column property="danjia" label="单价（元）" ></el-table-column>
          <el-table-column property="gys" label="供应商"></el-table-column>
          <el-table-column property="wxcs" label="维修次数"></el-table-column>
          <el-table-column property="hxcs" label="换新次数"></el-table-column>
          <el-table-column property="sdate" label="开始使用时间"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row,2)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="activeName === 'third'"  :data="tableData3"   :header-cell-style="{ 'background-color': 'transparent' }" >
          <el-table-column property="xh" label="序号"></el-table-column>
          <el-table-column property="station" label="姓名" ></el-table-column>
          <el-table-column property="content" label="部门" ></el-table-column>
          <el-table-column property="person" label="职位" ></el-table-column>
          <el-table-column property="waringji" label="联系电话"></el-table-column>
          <el-table-column property="waringDate" label="工号"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row,3)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          background
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!--    详情-->
    <div class="h100"  v-show="dialogTableVisible">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
          <!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>
        <div v-if="activeName === 'first'" class="warningContent">
          <div class="wt"><span>耗材管理详情</span><i class="el-icon-warning ml10" style="font-size: 1.5rem;color: #E6307B;"></i>
            <div class="ml20">
              <el-date-picker
                v-model="valueDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </div>
          <div class="padding10">
            <div id="kaoecharts1" class="echart"></div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="warningContent">
          <div class="wt"><span>设备管理详情</span>
            <div class="ml20">
              <el-date-picker
                v-model="kaoqinDate"
                type="daterange"
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                >
              </el-date-picker>
            </div>
          </div>
          <div>
            <div id="kaoecharts1" class="echart"></div>
          </div>
        </div>
        <div v-if="activeName === 'third'" class="warningContent1">
          <div class="wt"><span>报表管理详情</span>
            <div class="ml20">
              <el-date-picker
                v-model="valueDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </div>
          <div class="wb">
            <div class="baseSession">
              <div class="leftSession">
                <p>姓名：业光</p>
                <p>职位：工程师</p>
                <p>入职时间：2024-02-01</p>
                <p>联系电话：17602323465</p>
              </div>
              <div class="rightSession">
                <div id="kaoecharts" class="echart"></div>
              </div>
            </div>

          </div>
        </div>

      </div>
    </div>

    <!--    解析弹框-->
    <div class="h101"  v-show="dialogjiexi">
      <div class="tanDiv"></div>
      <div  class="diaStyle">
        <div class="export">
          <!--          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>-->
        </div>
        <div class="xx" @click="hiddenTan"><img src="../../assets/images/xx.png" alt="" ></div>

        <div v-if="activeName === 'first'"  class="warningContent">
          <div class="wt"><span>耗材用量图</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="warningContent">
          <div class="wt"><span>设备用量图</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'third'"  class="warningContent">
          <div class="wt"><span>报表管理图</span></div>
          <div class="wb">
            <div class="baseSession">
              <div id="totalecharts" class="echart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "total",
  data() {
    return {
      dialogTableVisible:false,
      dialogjiexi:false,
      tableData1:[
        {
          xh:1,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30',
          ywaringDate:'2024-3-30',
          sdate:'2024-3-30',
        }, {
          xh:2,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30',
          ywaringDate:'2024-3-30',
          sdate:'2024-3-30',
        }, {
          xh:3,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30',
          ywaringDate:'2024-3-30',
          sdate:'2024-3-30',
        },

      ],
      tableData2:[
        {
          xh:1,
          mc:'垃圾桶',
          danwei:'个',
          danjia:'300',
          gys:'供应商',
          wxcs:'2',
          hxcs:'1',
          sdate:'2024-3-30',

        },{
          xh:2,
          mc:'垃圾桶',
          danwei:'个',
          danjia:'300',
          gys:'供应商',
          wxcs:'2',
          hxcs:'1',
          sdate:'2024-3-30',

        },{
          xh:3,
          mc:'垃圾桶',
          danwei:'个',
          danjia:'300',
          gys:'供应商',
          wxcs:'2',
          hxcs:'1',
          sdate:'2024-3-30',

        },

      ],
      tableData3:[
        {
          xh:1,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30'

        },
        {
          xh:2,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'重要告警',
          waringDate:'2024-3-30'

        },
        {
          xh:3,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'一般告警',
          waringDate:'2024-3-30'
        }
      ],
      tableData4:[
        {
          xh:1,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'严重告警',
          waringDate:'2024-3-30'

        },
        {
          xh:2,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'重要告警',
          waringDate:'2024-3-30'

        },
        {
          xh:3,
          station:'梁家务村处理站',
          content:'信号断开',
          person:'小杜 工号9527',
          waringji:'一般告警',
          waringDate:'2024-3-30'
        }
      ],
      // 总条数
      total: 10,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        valueDate: null,
      },
      activeName:'first',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      valueDate: '',
      form:{
        waringji:'严重告警',
        station:'梁家务村处理站',
        content:'更换xxxx',
        waringtype:'耗材告警',
        waringshe:'垃圾桶',
        waringyuan:'xx',
        waringdate:'2024-01-01',
        status:'已自动派单',
      },
      tableHis:[{
        xh:1,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:2,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:3,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      },{
        xh:4,
        station:'梁家务村处理站',
        content:'信号断开',
        person:'小杜 工号9527',
        waringDate:'2024-3-30',
      }],
      kaoqinDate:'',
    };
  },
  mounted() {

  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查询信息列表 */
    getList() {
      this.loading = true;
      listCkxx(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //搜索下拉选择事件
    handleSelectChange(value) {
      // 处理选择变化的逻辑，这里的 value 参数就是用户选择的值
      console.log('选择的值：', value);
    },
    //弹框点击展示对应table
    handleClick(tab, event) {
      switch (tab.name) {
        case 'first':
          // this.getList1();
          break;
        case 'second':
          // this.getList2();
          break;
        case 'third':
          // this.getList3();
          break;
        case 'fourth':
          // this.getList4();
          break;
        default:
          break;
      }
    },

    //图形解析
    jiexi(){
      this.dialogjiexi = true;
      this.jiexifunction()
    },

    //解析方法

    jiexifunction(){
      const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              color: '#ffffff' // 设置字体颜色为白色
            }

          },
          legend: {
            data: ['阀门', '开关', '测温计', '气体检测仪'],
            textStyle: {
              color: '#ffffff' // 设置字体颜色为白色
            }
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              data: ['1月', '2月', '3月', '4月', '5月'],
              axisLabel: {
                textStyle: {
                  color: '#ffffff' // 设置 x 轴字体颜色为白色
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#ffffff' // 设置 x 轴字体颜色为白色
                }
              }

            }
          ],
          series: [
            {
              name: '阀门',
              type: 'bar',
              barGap: 0,
              emphasis: {
                focus: 'series'
              },
              data: [320, 332, 301, 334, 390]
            },
            {
              name: '开关',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290]
            },
            {
              name: '测温计',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 154, 190]
            },
            {
              name: '气体检测仪',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [98, 77, 101, 99, 40]
            }
          ]
        };

      this.myChart = echarts.init(document.getElementById("totalecharts"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },

    //隐藏弹框
    hiddenTan(){
      this.dialogTableVisible = false;
      this.dialogjiexi = false;
    },

    /** 查看按钮操作 */
    handleUpdate(row,b) {

      this.dialogTableVisible = true;
      this.detailEcharts()



      // this.reset();
      // const storeId = row.storeId || this.ids
      // getCkxx(storeId).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      // });
    },

    detailEcharts(){
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            textStyle: {
              color: '#ffffff' // 设置 x 轴字体颜色为白色
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#ffffff' // 设置 x 轴字体颜色为白色
            }
          }
        },
        series: [{
          data: [1, 2, 1, 2, 1, 0, 1],
          type: 'bar'
        }]
      }
      this.myChart = echarts.init(document.getElementById("kaoecharts1"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });


    },



    getWaringColor(waringji) {
      switch (waringji) {
        case '严重告警':
          return '#E6307B'; // 严重告警的颜色
        case '重要告警':
          return '#ED6942'; // 重要告警的颜色
        case '一般告警':
          return '#0289FF'; // 一般告警的颜色
        default:
          return ''; // 默认颜色
      }
    }
  }
};
</script>

<style scoped lang="scss">
.yunying{
  width: 100%;
  height: 100%;

  :deep(.el-tabs__item) {
    font-size: 1.2rem!important;
    color: white;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
  }
  :deep(.el-tabs__item.is-active) {
    color: #1890ff;
  }
  .el-table, :deep(.el-table tr){
    background-color: transparent!important;
  }
  .el-table thead {
    background-color: transparent;
  }
  :deep(.el-table .el-table__header-wrapper th), :deep(.el-table .el-table__fixed-header-wrapper th) {
    color: white;
  }
  :deep(.el-table th.el-table__cell.is-leaf),  :deep(.el-table td.el-table__cell){
    border-bottom: none;
    color: white;
  }
  :deep(.el-table tr:hover) {
    background-color: transparent !important;
  }
  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: transparent !important;
  }
  :deep(.el-table::before) {
    height: 0px;
  }
  .contentDiv{
    position: absolute;
    width: 80%;
    left: 18%;
    top: 7%;
    .searchDiv{
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      z-index: 9999;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      margin-top: 3rem;
      .waringStyle{



      }

    }

    .tableList{
      padding: 1rem 0;

      .pagination-container{
        background: transparent;
      }
      :deep(.el-pagination__total){
        color: white;
      }
      :deep(.el-pagination__jump) {
        color:white;
      }
    }
  }


  .h100{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
      :deep(.el-tabs__item) {font-size: 1.2rem!important;color: white; font-family: PingFangSC, PingFang SC;font-weight: 500;}
      :deep(.el-tabs__item.is-active) {color: #1890ff;}
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .export{ position: absolute; right: 3rem;top: 2.2rem;cursor: pointer;z-index: 9999;}
      .warningContent{
        padding: 2rem 3rem;
        color: white;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: space-between;
          span{
            font-family: HYYaKuHei, HYYaKuHei;
            font-weight: normal;
            font-size: 1.5rem;
            color: #FFFFFF;
          }
        }

        div:nth-of-type(2){
          padding: 1rem;
          width: 100%;
          height: 30rem;
          #kaoecharts1{
            width: 60rem;
            height: 30rem;
          }
        }


      }

      .warningContent1{
        padding: 2rem 3rem;
        color: white;
        height: 100%;
        .wt{
          font-family: HYYaKuHei, HYYaKuHei;
          font-weight: normal;
          font-size: 1.5rem;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .wb{
          height: 80%;
          .baseSession{
            height: 100%;
            margin-top: 1.5rem;
            display: flex;
            .leftSession{
              flex: 1;
              padding: 3rem;
              p{
                line-height: 2rem;
              }
            }
            .rightSession{
              flex: 1;
              #kaoecharts{
                width: 30rem;
                height: 30rem;
              }
            }
          }
        }


      }
    }
  }

  .h101{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    .tanDiv{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #081F31;
      z-index: 222;
      opacity: 0.8;
    }
    .diaStyle{
      /* 修改弹框样式 */
      position: relative;
      width: 71rem;
      height: 43rem;
      background-image: url("../../assets/images/total.png");
      background-size: contain; /* 背景图片铺满并保持比例不变 */
      background-repeat: no-repeat; /* 不重复平铺 */
      background-position: center; /* 图片居中对齐 */
      padding: 2rem 3rem;
      z-index: 333;
      .xx{
        width: 2rem;
        height: 2rem;
        position: absolute;
        top: -1rem;
        right: -1rem;
        cursor: pointer;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .warningContent{
        width: 100%;
        height: 100%;
        padding: 2rem 3rem;
        color: white;
        .wt {
          width: 100%;
          height: 5%;
          span{
            font-family: HYYaKuHei, HYYaKuHei;
            font-weight: normal;
            font-size: 1.5rem;
            color: #FFFFFF;
          }
        }

        .wb{
          width: 100%;
          height: 95%;
          .baseSession{
            width: 100%;
            height: 100%;
            margin-top: 1.5rem;
            .echart{
              width: 65rem;
              height: 32rem;
            }
          }
        }


      }
    }
  }
}


</style>

